<template>
    <n-card size="small" id="vc_systemInfo">
        <div style="position: absolute; width: 100%">
            <div
                style="
                    position: relative;
                    right: calc(1.25rem / 2 - 0.25rem);
                    top: calc(-1.25rem + 0.5rem);
                    justify-content: end;
                    display: flex;
                ">
                <div
                    style="
                        width: 1.25rem;
                        height: 1.25rem;
                        background-color: hsla(174, 100%, 33%, 0.5);
                        transform: translateX(-50%);
                        clip-path: polygon(100% 0, 100% 100%, 0 0);
                        border-radius: 0.25rem;
                    "></div>
            </div>
        </div>
        <n-collapse>
            <n-collapse-item title="系统信息" name="1">
                <table>
                    <tbody>
                        <tr>
                            <td class="title">主机名</td>
                            <td class="value">{{ data['hostname'] || 'unknown' }}</td>
                        </tr>
                        <tr>
                            <td class="title">发行版本</td>
                            <td class="value">{{ data['distribution'] || 'unknown' }}</td>
                        </tr>
                        <tr>
                            <td class="title">发行版ID</td>
                            <td class="value">{{ data['version_id'] || 'unknown' }}</td>
                        </tr>
                        <tr>
                            <td class="title">CPU名称</td>
                            <td class="value">{{ data['cpu_name'] || 'unknown' }}</td>
                        </tr>
                        <tr>
                            <td class="title">&emsp;核心数</td>
                            <td class="value">{{ data['cpu_cores'] || 'unknown' }}</td>
                        </tr>
                        <tr>
                            <td class="title">&emsp;线程数</td>
                            <td class="value">{{ data['cpu_threads'] || 'unknown' }}</td>
                        </tr>
                        <tr>
                            <td class="title">&emsp;架构</td>
                            <td class="value">{{ data['cpu_architecture'] || 'unknown' }}</td>
                        </tr>
                        <tr>
                            <td class="title">内存大小</td>
                            <td class="value">{{ data['memory_total_gb'] || 'unknown' }}&ensp;GiB</td>
                        </tr>
                        <tr>
                            <td class="title">交换大小</td>
                            <td class="value">{{ data['swap_total_gb'] || 'unknown' }}&ensp;GiB</td>
                        </tr>

                        <tr>
                            <td class="title">运行时长</td>
                            <td class="value">{{ data['os_uptime'] || 'unknown' }}</td>
                        </tr>
                        <tr>
                            <td class="title">启动时间</td>
                            <td class="value">{{ data['boot_time'] || 'unknown' }}</td>
                        </tr>
                    </tbody>
                </table>
            </n-collapse-item>
        </n-collapse>
    </n-card>
</template>

<script setup lang="ts">
import axiosInstance from '@/utils/network/axios'

import { onMounted, ref } from 'vue'
const data = ref<object | any>({})

function handleGetSystemInfo() {
    axiosInstance.get('/home/dashboard/system-info').then((res) => {
        data.value = res.data
    })
}

onMounted(() => {
    handleGetSystemInfo()
})
</script>

<style lang="scss" scoped>
@use '@/assets/style/sea-viewport';
#vc_systemInfo {
    @media (min-width: sea-viewport.$phone_min) {
        //max-width: var(--max_width_2items);
    }
    :deep(.n-collapse-item__content-inner) {
        padding-top: 0.5rem !important;
    }
    table {
        border-collapse: collapse;
        border: 1px solid #0000000e;
        width: 100%;

        td {
            padding: 0.25rem 0 0.25rem 0.75rem;
        }
        .title {
            min-width: 10rem;
        }
        tr:nth-child(odd) {
            background-color: #00000007;
        }
    }
}
.n-card {
}
</style>
